<template>
  <a-spin :spinning="loading">
    <div class="modal-header">
      <div class="modal-title" v-if="language && language.id">
        {{ l('EditLanguage') }}:
        <span>{{ language.name }}</span>
      </div>
      <div class="modal-title" v-else>{{ l('CreateNewLanguage') }}</div>
    </div>
    <slot></slot>
    <div class="modal-body">
      <a-form :model="form" @submit="save()" autocomplete="off" ref="formRef">
        <!-- 语言名称 -->
        <a-form-item :label="l('LanguageName')">
          <a-select v-model:value="form.name" :show-arrow="true" :options="iconOptions"></a-select>
        </a-form-item>
        <!-- 语言图标 -->
        <a-form-item :label="l('LanguageIcon')">
          <a-select v-model:value="form.icon" :show-arrow="true" :options="nameOptions"></a-select>
        </a-form-item>
        <!-- 启用 -->
        <a-form-item :label="l('Enabled')">
          <a-switch
            v-model:checked="form.isEnabled"
            :checkedChildren="l('Yes')"
            :unCheckedChildren="l('No')"
          />
        </a-form-item>
      </a-form>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="save()">
        <i class="acticon acticon-save"></i>
        <span>{{ l('Save') }}</span>
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="save(false)">
        <save-outlined />
        {{ l('SaveDoesNotExit') }}
      </a-button>
    </div>
  </a-spin>
</template>
<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import {
    ComboboxItemDto,
    CreateOrUpdateLanguageInput,
    LanguageEditDto,
    LanguageServiceProxy,
  } from '/@/shared/service-proxies/service-proxies';

  export default defineComponent({
    name: 'create-or-edit-language',
    mixins: [ModalComponentBase],
    props: {
      pageDataList: Array,
    },
    data() {
      return {
        language: new LanguageEditDto(),
        id: Number,
        form: {
          name: '',
          icon: '',
          isEnabled: false,
        },
        _languageServiceProxy: new LanguageServiceProxy(),
        isStart: false,
        nameOptions: new Array<any>(),
        iconOptions: new Array<any>(),
      };
    },

    mounted() {
      this.getPageData(this.pageDataList[0]);
    },
    methods: {
      /** 获取数据 */
      getPageData(data): void {
        this.loading = true;
        this.id = data;
        this._languageServiceProxy
          .getLanguageForEdit(this.id as any)
          .finally(() => {
            this.loading = false;
          })
          .then((res) => {
            this.nameOptions = (res.flags as Array<ComboboxItemDto>).map((item) => ({
              value: item.value,
              title: item.displayText,
              key: item.value,
              label: item.displayText,
            }));
            this.iconOptions = (res.languageNames as Array<ComboboxItemDto>).map((item) => ({
              value: item.value,
              title: item.displayText,
              key: item.value,
              label: item.displayText,
            }));
            this.language = res.language;
            if (this.id != null || this.id != undefined) {
              this.form.icon = this.language.icon as any;
              this.form.name = this.language.name;
              this.form.isEnabled = this.language.isEnabled as boolean;
            }
            this.id != (this.language.id as any);
          });
      },
      /** 提交 */
      save(closeFlag = true): void {
        (this.$refs.formRef as any).validate().then(() => {
          this.loading = true;
          let _language: CreateOrUpdateLanguageInput = new CreateOrUpdateLanguageInput();
          _language.language.icon = this.form.icon;
          _language.language.name = this.form.name;
          _language.language.isEnabled = this.form.isEnabled;
          if (this.id != null || this.id != undefined)
            _language.language.id = parseInt(this.id as any);
          this._languageServiceProxy
            .createOrUpdateLanguage(_language)
            .finally(() => {
              this.loading = false;
            })
            .then(() => {
              this.notify.success(this.l('SavedSuccessfully'));
              if (closeFlag) {
                this.success();
              } else {
                this.saveNotClose();
              }
            });
        });
      },
    },
  });
</script>
